  <!-- 前端布局功能 -->
  <aside class="control-sidebar control-sidebar-dark">
    <!-- 布局按钮 -->
    <ul class="nav nav-tabs nav-justified control-sidebar-tabs">
        
      <li><a href="#control-sidebar-home-tab" data-toggle="tab"><i class="fa fa-home"></i></a></li>
      <li><a href="#control-sidebar-settings-tab" data-toggle="tab"><i class="fa fa-gears"></i></a></li>
    </ul>
    <!-- Tab对应 -->
    <div class="tab-content">
        <!--左侧按钮-->
        <div id="control-sidebar-theme-demo-options-tab" class="tab-pane active">
            <div>
                <!--
                <h4 class="control-sidebar-heading">布局设定</h4>
                <div class="form-group"><label class="control-sidebar-subheading"><input type="checkbox" data-layout="fixed" class="pull-right"> 固定布局</label><p>盒子模型和固定布局不能同时启作用</p></div>
                <div class="form-group"><label class="control-sidebar-subheading"><input type="checkbox" data-layout="layout-boxed" class="pull-right"> 盒子布局</label><p>盒子布局最大宽度将被限定为1250px</p></div>
                <div class="form-group"><label class="control-sidebar-subheading"><input type="checkbox" data-layout="sidebar-collapse" class="pull-right"> 切换菜单栏</label><p>切换菜单栏的展示或收起</p></div>
                <div class="form-group"><label class="control-sidebar-subheading"><input type="checkbox" data-enable="expandOnHover" class="pull-right"> 菜单栏自动展开</label><p>鼠标移到菜单栏自动展开</p></div>
                <div class="form-group"><label class="control-sidebar-subheading"><input type="checkbox" data-menu="show-submenu" class="pull-right"> 显示菜单栏子菜单</label><p>菜单栏子菜单将始终显示</p></div>
                <div class="form-group"><label class="control-sidebar-subheading"><input type="checkbox" data-menu="disable-top-badge" class="pull-right" checked="checked"> 禁用顶部彩色小角标</label><p>左边菜单栏的彩色小角标不受影响</p></div>
                <div class="form-group"><label class="control-sidebar-subheading"><input type="checkbox" data-controlsidebar="control-sidebar-open" class="pull-right"> 切换右侧操作栏</label><p>切换右侧操作栏覆盖或独占</p></div>
                <div class="form-group"><label class="control-sidebar-subheading"><input type="checkbox" data-sidebarskin="toggle" class="pull-right"> 切换右侧操作栏背景</label><p>将右侧操作栏背景亮色或深色切换</p></div>
                -->
                
                <h4 class="control-sidebar-heading">皮肤</h4>
                <ul class="list-unstyled clearfix">
                    <li style="float:left; width: 33.33333%; padding: 5px;">
                        <a href="javascript:void(0)" data-skin="skin-blue" style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)"
                        class="clearfix full-opacity-hover">
                            <div>
                                <span style="display:block; width: 20%; float: left; height: 7px; background: #367fa9">
                                </span>
                                <span class="bg-light-blue" style="display:block; width: 80%; float: left; height: 7px;">
                                </span>
                            </div>
                            <div>
                                <span style="display:block; width: 20%; float: left; height: 20px; background: #222d32">
                                </span>
                                <span style="display:block; width: 80%; float: left; height: 20px; background: #f4f5f7">
                                </span>
                            </div>
                        </a>
                        <p class="text-center no-margin">
                            Blue
                        </p>
                    </li>
                    <li style="float:left; width: 33.33333%; padding: 5px;">
                        <a href="javascript:void(0)" data-skin="skin-black" style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)"
                        class="clearfix full-opacity-hover">
                            <div style="box-shadow: 0 0 2px rgba(0,0,0,0.1)" class="clearfix">
                                <span style="display:block; width: 20%; float: left; height: 7px; background: #fefefe">
                                </span>
                                <span style="display:block; width: 80%; float: left; height: 7px; background: #fefefe">
                                </span>
                            </div>
                            <div>
                                <span style="display:block; width: 20%; float: left; height: 20px; background: #222">
                                </span>
                                <span style="display:block; width: 80%; float: left; height: 20px; background: #f4f5f7">
                                </span>
                            </div>
                        </a>
                        <p class="text-center no-margin">
                            Black
                        </p>
                    </li>
                    <li style="float:left; width: 33.33333%; padding: 5px;">
                        <a href="javascript:void(0)" data-skin="skin-purple" style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)"
                        class="clearfix full-opacity-hover">
                            <div>
                                <span style="display:block; width: 20%; float: left; height: 7px;" class="bg-purple-active">
                                </span>
                                <span class="bg-purple" style="display:block; width: 80%; float: left; height: 7px;">
                                </span>
                            </div>
                            <div>
                                <span style="display:block; width: 20%; float: left; height: 20px; background: #222d32">
                                </span>
                                <span style="display:block; width: 80%; float: left; height: 20px; background: #f4f5f7">
                                </span>
                            </div>
                        </a>
                        <p class="text-center no-margin">
                            Purple
                        </p>
                    </li>
                    <li style="float:left; width: 33.33333%; padding: 5px;">
                        <a href="javascript:void(0)" data-skin="skin-green" style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)"
                        class="clearfix full-opacity-hover">
                            <div>
                                <span style="display:block; width: 20%; float: left; height: 7px;" class="bg-green-active">
                                </span>
                                <span class="bg-green" style="display:block; width: 80%; float: left; height: 7px;">
                                </span>
                            </div>
                            <div>
                                <span style="display:block; width: 20%; float: left; height: 20px; background: #222d32">
                                </span>
                                <span style="display:block; width: 80%; float: left; height: 20px; background: #f4f5f7">
                                </span>
                            </div>
                        </a>
                        <p class="text-center no-margin">
                            Green
                        </p>
                    </li>
                    <li style="float:left; width: 33.33333%; padding: 5px;">
                        <a href="javascript:void(0)" data-skin="skin-red" style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)"
                        class="clearfix full-opacity-hover">
                            <div>
                                <span style="display:block; width: 20%; float: left; height: 7px;" class="bg-red-active">
                                </span>
                                <span class="bg-red" style="display:block; width: 80%; float: left; height: 7px;">
                                </span>
                            </div>
                            <div>
                                <span style="display:block; width: 20%; float: left; height: 20px; background: #222d32">
                                </span>
                                <span style="display:block; width: 80%; float: left; height: 20px; background: #f4f5f7">
                                </span>
                            </div>
                        </a>
                        <p class="text-center no-margin">
                            Red
                        </p>
                    </li>
                    <li style="float:left; width: 33.33333%; padding: 5px;">
                        <a href="javascript:void(0)" data-skin="skin-yellow" style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)"
                        class="clearfix full-opacity-hover">
                            <div>
                                <span style="display:block; width: 20%; float: left; height: 7px;" class="bg-yellow-active">
                                </span>
                                <span class="bg-yellow" style="display:block; width: 80%; float: left; height: 7px;">
                                </span>
                            </div>
                            <div>
                                <span style="display:block; width: 20%; float: left; height: 20px; background: #222d32">
                                </span>
                                <span style="display:block; width: 80%; float: left; height: 20px; background: #f4f5f7">
                                </span>
                            </div>
                        </a>
                        <p class="text-center no-margin">
                            Yellow
                        </p>
                    </li>
                    <li style="float:left; width: 33.33333%; padding: 5px;">
                        <a href="javascript:void(0)" data-skin="skin-blue-light" style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)"
                        class="clearfix full-opacity-hover">
                            <div>
                                <span style="display:block; width: 20%; float: left; height: 7px; background: #367fa9">
                                </span>
                                <span class="bg-light-blue" style="display:block; width: 80%; float: left; height: 7px;">
                                </span>
                            </div>
                            <div>
                                <span style="display:block; width: 20%; float: left; height: 20px; background: #f9fafc">
                                </span>
                                <span style="display:block; width: 80%; float: left; height: 20px; background: #f4f5f7">
                                </span>
                            </div>
                        </a>
                        <p class="text-center no-margin" style="font-size: 12px">
                            Blue Light
                        </p>
                    </li>
                    <li style="float:left; width: 33.33333%; padding: 5px;">
                        <a href="javascript:void(0)" data-skin="skin-black-light" style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)"
                        class="clearfix full-opacity-hover">
                            <div style="box-shadow: 0 0 2px rgba(0,0,0,0.1)" class="clearfix">
                                <span style="display:block; width: 20%; float: left; height: 7px; background: #fefefe">
                                </span>
                                <span style="display:block; width: 80%; float: left; height: 7px; background: #fefefe">
                                </span>
                            </div>
                            <div>
                                <span style="display:block; width: 20%; float: left; height: 20px; background: #f9fafc">
                                </span>
                                <span style="display:block; width: 80%; float: left; height: 20px; background: #f4f5f7">
                                </span>
                            </div>
                        </a>
                        <p class="text-center no-margin" style="font-size: 12px">
                            Black Light
                        </p>
                    </li>
                    <li style="float:left; width: 33.33333%; padding: 5px;">
                        <a href="javascript:void(0)" data-skin="skin-purple-light" style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)"
                        class="clearfix full-opacity-hover">
                            <div>
                                <span style="display:block; width: 20%; float: left; height: 7px;" class="bg-purple-active">
                                </span>
                                <span class="bg-purple" style="display:block; width: 80%; float: left; height: 7px;">
                                </span>
                            </div>
                            <div>
                                <span style="display:block; width: 20%; float: left; height: 20px; background: #f9fafc">
                                </span>
                                <span style="display:block; width: 80%; float: left; height: 20px; background: #f4f5f7">
                                </span>
                            </div>
                        </a>
                        <p class="text-center no-margin" style="font-size: 12px">
                            Purple Light
                        </p>
                    </li>
                    <li style="float:left; width: 33.33333%; padding: 5px;">
                        <a href="javascript:void(0)" data-skin="skin-green-light" style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)"
                        class="clearfix full-opacity-hover">
                            <div>
                                <span style="display:block; width: 20%; float: left; height: 7px;" class="bg-green-active">
                                </span>
                                <span class="bg-green" style="display:block; width: 80%; float: left; height: 7px;">
                                </span>
                            </div>
                            <div>
                                <span style="display:block; width: 20%; float: left; height: 20px; background: #f9fafc">
                                </span>
                                <span style="display:block; width: 80%; float: left; height: 20px; background: #f4f5f7">
                                </span>
                            </div>
                        </a>
                        <p class="text-center no-margin" style="font-size: 12px">
                            Green Light
                        </p>
                    </li>
                    <li style="float:left; width: 33.33333%; padding: 5px;">
                        <a href="javascript:void(0)" data-skin="skin-red-light" style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)"
                        class="clearfix full-opacity-hover">
                            <div>
                                <span style="display:block; width: 20%; float: left; height: 7px;" class="bg-red-active">
                                </span>
                                <span class="bg-red" style="display:block; width: 80%; float: left; height: 7px;">
                                </span>
                            </div>
                            <div>
                                <span style="display:block; width: 20%; float: left; height: 20px; background: #f9fafc">
                                </span>
                                <span style="display:block; width: 80%; float: left; height: 20px; background: #f4f5f7">
                                </span>
                            </div>
                        </a>
                        <p class="text-center no-margin" style="font-size: 12px">
                            Red Light
                        </p>
                    </li>
                    <li style="float:left; width: 33.33333%; padding: 5px;">
                        <a href="javascript:void(0)" data-skin="skin-yellow-light" style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)"
                        class="clearfix full-opacity-hover">
                            <div>
                                <span style="display:block; width: 20%; float: left; height: 7px;" class="bg-yellow-active">
                                </span>
                                <span class="bg-yellow" style="display:block; width: 80%; float: left; height: 7px;">
                                </span>
                            </div>
                            <div>
                                <span style="display:block; width: 20%; float: left; height: 20px; background: #f9fafc">
                                </span>
                                <span style="display:block; width: 80%; float: left; height: 20px; background: #f4f5f7">
                                </span>
                            </div>
                        </a>
                        <p class="text-center no-margin" style="font-size: 12px">
                            Yellow Light
                        </p>
                    </li>
                </ul>
            </div>
      </div>
      <!-- 中间按钮 -->
      <div class="tab-pane" id="control-sidebar-home-tab">
        <h3 class="control-sidebar-heading">主页</h3>
      </div>
      <!-- 右侧按钮 -->
      <div class="tab-pane" id="control-sidebar-settings-tab">
        <h3 class="control-sidebar-heading">配置</h3>
      </div>
      
    </div>
  </aside>